<template>
    <el-container>
        <el-header>
            <el-form :inline="true" :model="formInline" class="demo-form-inline search-form">
                <el-form-item label="采购类型">
                    <el-input v-model="formInline.type" placeholder="采购类型"></el-input>
                </el-form-item>
                <el-form-item label="物品名称">
                    <el-input v-model="formInline.thingsName" placeholder="物品名称"></el-input>
                </el-form-item>
                <el-form-item label="支付方式">
                    <el-input v-model="formInline.payWay" placeholder="支付方式"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="searchData()">查询</el-button>
                    <el-button type="primary" @click="cleanall()">清空</el-button>
                    <el-button type="primary" @click="motalVisible=true">新建+</el-button>
                </el-form-item>
            </el-form>

            <!--新建申请单的模态框-->
            <el-dialog title="采购申请单" :visible.sync="motalVisible">
                <el-form :model="form">
                    <el-form-item label="采购类型:" :label-width="formLabelWidth">
                        <el-input v-model="form.type" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="期望交付日期:" :label-width="formLabelWidth">
                        <el-input v-model="form.date" autocomplete="off" ></el-input>
                    </el-form-item>
                    <el-form-item label="物品名称:" :label-width="formLabelWidth">
                        <el-input v-model="form.goodsName" autocomplete="off" ></el-input>
                    </el-form-item>
                    <el-form-item label="规格:" :label-width="formLabelWidth">
                        <el-input v-model="form.specs" autocomplete="off" ></el-input>
                    </el-form-item>
                    <el-form-item label="单位:" :label-width="formLabelWidth">
                        <el-input v-model="form.piece" autocomplete="off" ></el-input>
                    </el-form-item>
                    <el-form-item label="数量:" :label-width="formLabelWidth">
                        <el-input v-model="form.count" autocomplete="off" ></el-input>
                    </el-form-item>
                    <el-form-item label="价格:" :label-width="formLabelWidth">
                        <el-input v-model="form.price" autocomplete="off" ></el-input>
                    </el-form-item>
                    <el-form-item label="支付方式:" :label-width="formLabelWidth">
                        <el-input v-model="form.payWay" autocomplete="off" ></el-input>
                    </el-form-item>
                    <el-form-item label="申请事由:" :label-width="formLabelWidth">
                        <el-input v-model="form.reason" autocomplete="off" ></el-input>
                    </el-form-item>
                    <el-form-item label="备注：" :label-width="formLabelWidth">
                        <el-input v-model="form.remarks" autocomplete="off" ></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="motalVisible = false">取 消</el-button>
                    <el-button type="primary" @click="createNew">确 定</el-button>
                </div>
            </el-dialog>
        </el-header>
        <el-main>
            <el-table
                    :data="shopData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                    :cell-style="cellStyle"
                    :header-cell-style="rowClass"
                    border
                    class="user-list"
                    style="width: 100%">
                <el-table-column
                        prop="shopId"
                        label="编号"
                        width="80">
                </el-table-column>
                <el-table-column
                        prop="type"
                        label="采购类型"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="date"
                        label="期望交付日期"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="goodsName"
                        label="物品名称"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="specs"
                        label="规格"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="piece"
                        label="单位"
                        width="80">
                </el-table-column>
                <el-table-column
                        prop="count"
                        label="数量"
                        width="80">
                </el-table-column>
                <el-table-column
                        prop="price"
                        label="价格"
                        width="80">
                </el-table-column>
                <el-table-column
                        prop="payWay"
                        label="支付方式"
                        width="80">
                </el-table-column>
                <el-table-column
                        prop="reason"
                        label="申请事由"
                        width="150">
                </el-table-column>
                <el-table-column
                        prop="remarks"
                        label="备注"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="createMan"
                        label="创建人"
                        width="80">
                </el-table-column>
                <el-table-column
                        prop="createTime"
                        label="创建时间"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="status"
                        label="审批状态"
                        width="100">
                </el-table-column>
                <el-table-column
                        label="操作"
                        width="100">
                    <template slot-scope="scope">
                        <el-button
                                @click="look(scope.row)"
                                type="text"
                                size="small">
                            查看详情
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!--分页-->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="50"
                    layout="total, sizes, prev, pager, next, jumper"
                    class="user-list-page"
                    :total="total">
            </el-pagination>

            <!--查看详情模态框-->
            <el-dialog title="采购申请单" :visible.sync="dialogFormVisible">
                <el-form :model="formDetail">
                    <el-form-item label="采购类型:" :label-width="formLabelWidth">
                        <el-input v-model="formDetail.type" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="期望交付日期:" :label-width="formLabelWidth">
                        <el-input v-model="formDetail.date" autocomplete="off" ></el-input>
                    </el-form-item>
                    <el-form-item label="物品名称:" :label-width="formLabelWidth">
                        <el-input v-model="formDetail.goodsName" autocomplete="off" ></el-input>
                    </el-form-item>
                    <el-form-item label="规格:" :label-width="formLabelWidth">
                        <el-input v-model="formDetail.specs" autocomplete="off" ></el-input>
                    </el-form-item>
                    <el-form-item label="单位:" :label-width="formLabelWidth">
                        <el-input v-model="formDetail.piece" autocomplete="off" ></el-input>
                    </el-form-item>
                    <el-form-item label="数量:" :label-width="formLabelWidth">
                        <el-input v-model="formDetail.count" autocomplete="off" ></el-input>
                    </el-form-item>
                    <el-form-item label="价格:" :label-width="formLabelWidth">
                        <el-input v-model="formDetail.price" autocomplete="off" ></el-input>
                    </el-form-item>
                    <el-form-item label="支付方式:" :label-width="formLabelWidth">
                        <el-input v-model="formDetail.payWay" autocomplete="off" ></el-input>
                    </el-form-item>
                    <el-form-item label="申请事由:" :label-width="formLabelWidth">
                        <el-input v-model="formDetail.reason" autocomplete="off" ></el-input>
                    </el-form-item>
                    <el-form-item label="备注：" :label-width="formLabelWidth">
                        <el-input v-model="formDetail.remarks" autocomplete="off" ></el-input>
                    </el-form-item>
                    <el-form-item label="创建人：" :label-width="formLabelWidth">
                        <el-input v-model="formDetail.createMan" autocomplete="off" ></el-input>
                    </el-form-item>
                    <el-form-item label="创建时间：" :label-width="formLabelWidth">
                        <el-input v-model="formDetail.createTime" autocomplete="off" ></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="dialogFormVisible=false">确 定</el-button>
                </div>
            </el-dialog>
        </el-main>
    </el-container>
</template>

<script>
    export default {
        name: "shop",
        data(){
            return{
                formInline:{
                    type:'',
                    thingsName:'',
                    payWay:''
                },
                shopData: [
                    {
                        shopId:'001',
                        type:'定期采购',
                        date:'2020-09-10',
                        goodsName:'备课本',
                        specs:'17cm*12cm',
                        piece:'本',
                        count:'150',
                        price:'15',
                        payWay:'微信',
                        reason:'很难解决',
                        remarks:'每位老师至少人手一本',
                        createMan:'iii',
                        createTime:'2020-08-15',
                        status:'正在审核中'
                    },
                    {
                        shopId:'002',
                        type:'定期采购',
                        date:'2020-7-2',
                        goodsName:'备课本',
                        specs:'17cm*12cm',
                        piece:'本',
                        count:'20',
                        price:'15',
                        payWay:'微信',
                        reason:'很难解决',
                        remarks:'在校老师人手一本',
                        createMan:'iii',
                        createTime:'2020-06-15',
                        status:'正在审核中',

                    },
                    {
                        shopId:'003',
                        type:'定期采购',
                        date:'2020-05-20',
                        goodsName:'粉笔',
                        specs:'17cm*12cm',
                        piece:'盒',
                        count:'150',
                        price:'15',
                        payWay:'微信',
                        reason:'很难解决',
                        remarks:'一个教室一盒',
                        createMan:'iii',
                        createTime:'2020-05-15',
                        status:'未通过审核'
                    },
                    {
                        shopId:'004',
                        type:'补充采购',
                        date:'2020-05-6',
                        goodsName:'备课本',
                        specs:'17cm*12cm',
                        piece:'本',
                        count:'15',
                        price:'15',
                        payWay:'微信',
                        reason:'很难解决',
                        remarks:'每位老师至少人手一本',
                        createMan:'iii',
                        createTime:'2020-04-15',
                        status:'已通过',
                    },
                    {
                        shopId:'005',
                        type:'定期采购',
                        date:'2020-03-2',
                        goodsName:'备课本',
                        specs:'17cm*12cm',
                        piece:'本',
                        count:'15',
                        price:'15',
                        payWay:'支付宝',
                        reason:'很难解决',
                        remarks:'每位老师至少人手一本',
                        createMan:'iii',
                        createTime:'2020-02-15',
                        status:'已通过',

                    },
                ],
                form:{
                    shopId:'',
                    type:'',
                    date:'',
                    goodsName:'',
                    specs:'',
                    piece:'',
                    count:'',
                    price:'',
                    payWay:'',
                    reason:'',
                    remarks:'',
                    createMan:'',
                    createTime:'',
                    status:'',
                },
                formDetail:{
                    shopId:'',
                    type:'',
                    date:'',
                    goodsName:'',
                    specs:'',
                    piece:'',
                    count:'',
                    price:'',
                    payWay:'',
                    reason:'',
                    remarks:'',
                    createMan:'',
                    createTime:'',
                    status:'',
                },
                formLabelWidth:'120px',
                dialogFormVisible:false,
                motalVisible:false,
                // 分页
                currentPage: 1, //当前页
                pageSize:5, //每页显示
                total:''
            }
        },
        methods:{
            //查询搜索
            searchData() {
                let that = this
                let arr = this.shopData
                if(this.formInline.type){
                    arr = arr.filter(function (val,index) {
                        return val.type == that.formInline.type
                    });
                }
                if(this.formInline.thingsName){
                    arr = arr.filter(function (val,index) {
                        return val.goodsName == that.formInline.thingsName
                    });
                }
                if(this.formInline.payWay){
                    arr = arr.filter(function (val,index) {
                        return val.payWay == that.formInline.payWay
                    });
                }
                this.shopData = arr
                that.total = that.shopData.length;
            },
            //清空
            cleanall(){
                this.formInline.type = '';
                this.formInline.thingsName = '';
                this.formInline.payWay = '';
                this.$router.go(0)
            },
            //新建申请单（假数据，刷新就没）
            createNew() {
                console.log("111")
                var shop= {
                    type:this.form.type,
                    date:this.form.date,
                    goodsName:this.form.goodsName,
                    specs:this.form.specs,
                    piece:this.form.piece,
                    count:this.form.count,
                    price:this.form.price,
                    payWay:this.form.payWay,
                    reason:this.form.reason,
                    remarks:this.form.remarks
                }
                this.shopData.push(shop)
                console.log(this.shopData)
                this.form.type = this.form.date = this.form.goodsName = this.form.specs
                    = this.form.piece = this.form.count = this.form.price
                    = this.form.payWay = this.form.reason = this.form.remarks =''//添加后就为空
                this.motalVisible = false
                this.total = this.shopData.length
            },
            //查看详情
            look(e){
                this.dialogFormVisible = true
                this.formDetail = e
            },
            //表格数据居中显示
            cellStyle({row,column,rowIndex,columnIndex}){
                return "text-align:center"
            },
            rowClass({row,rowIndex}){
                return "text-align:center"
            },
            //分页功能
            handleSizeChange(val) {
                this.pageSize = val
            },
            handleCurrentChange(val) {
                this.currentPage = val
            }
        },
        created() {
            this.total = this.shopData.length
        }
    }
</script>

<style scoped>
    .search-form {
        border: 1px solid #e4e4e4;
        padding: 20px 20px 0;
        box-shadow: 0 0 3px 1px #e4e4e4;
        border-radius: 3px;
    }
    .user-list {
        margin-top: 20px;
        padding: 20px;
        border: 1px solid #e4e4e4;
        box-shadow: 0 0 3px 1px #e4e4e4;
        border-radius: 3px;
    }
    .user-list-page{
        margin-top: 20px;
        padding: 20px;
        border: 1px solid #e4e4e4;
        box-shadow: 0 0 3px 1px #e4e4e4;
        border-radius: 3px;
        text-align: center;
    }
</style>